<template>
  <div>
    <kendo-hierarchicaldatasource
      ref="shapesDataSource"
      :batch="false"
      :transport-read-url="diaGramShapeDataSource.transportReadUrl"
      :transport-read-data-type="diaGramShapeDataSource.dataType"
      :transport-update-url="diaGramShapeDataSource.transportUpdateUrl"
      :transport-update-data-type="diaGramShapeDataSource.dataType"
      :transport-destroy-url="diaGramShapeDataSource.transportDestroyUrl"
      :transport-destroy-data-type="diaGramShapeDataSource.dataType"
      :transport-create-url="diaGramShapeDataSource.transportCreateUrl"
      :transport-create-data-type="diaGramShapeDataSource.dataType"
      :transport-parameter-map="diaGramShapeDataSource.parameterMap"
      :schema-model-id="diaGramShapeDataSource.schema.id"
      :schema-model-fields="diaGramShapeDataSource.schema.model.fields"
    />

    <kendo-diagram
      :data-source-ref="diaGramShape.ref"
      :connections-data-source="diaGramConnectionDataSource"
      :layout="diaGramLayout"
      :editable="diaGramEditoptions"
      :shape-defaults-visual="visualTemplate"
      :shape-defaults-content-template="shapesContentTemplate"
      :shape-defaults-content-font-size="shapesContentFontSize"
      :connection-defaults-editable="{tools:['edit','createConnection']}"
      :connection-defaults-stroke-color="'#586477'"
      :connection-defaults-stroke-width="2"
      @databound="onDataBound"
    />
  </div>
</template>
<script>
  import { Diagram } from '@progress/kendo-diagram-vue-wrapper'
  import { HierarchicalDataSource } from '@progress/kendo-datasource-vue-wrapper'

  export default {
    name: 'KendoDiagramCmpt',
    components: {
      'kendo-diagram': Diagram,
      'kendo-hierarchicaldatasource': HierarchicalDataSource
    },
    props: {
      diaGramShapeDataSource: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramConnectionDataSource: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramLayout: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramEditoptions: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramShape: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramConnection: {
        type: Object,
        default() {
          return {}
        }
      },
      diaGramShapeContent: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data: function() {
      const { transport } = this.diaGramConnectionDataSource
      const { id, fields } = this.diaGramConnectionDataSource.schema.model
      const shapeFields = this.diaGramShapeDataSource.schema.model
      const { type, subtype, underneathHorizontalOffset } = this.diaGramLayout
      const { template, fontSize } = this.diaGramShapeContent
      return {
        connectionsDataSource: {
          batch: false,
          transport: transport,
          schema: {
            model: {
              id: id,
              fields: fields
            }
          }
        },
        schemaModelFields: shapeFields,
        schemaModelConnectionFields: fields,
        layout: {
          type: type,
          subtype: subtype,
          underneathHorizontalOffset: underneathHorizontalOffset
        },
        shapesContentTemplate: template,
        shapesContentFontSize: fontSize
      }
    },
    methods: {
      parameterMap: function(options, operation) {
        if (operation !== 'read') {
          // eslint-disable-next-line no-undef
          return { models: kendo.stringify(options.models || [options]) }
        }
      },
      visualTemplate: function(options) {
        // eslint-disable-next-line no-undef
        var dataviz = kendo.dataviz
        var g = new dataviz.diagram.Group()
        var dataItem = options.dataItem
        g.append(new dataviz.diagram.Rectangle({
          width: 240,
          height: 67,
          stroke: {
            width: 0
          },
          fill: '#e8eff7'
        }))
        g.append(new dataviz.diagram.Rectangle({
          width: 8,
          height: 67,
          fill: dataItem.Color,
          stroke: {
            width: 0
          }
        }))
        return g
      },
      onDataBound: function(e) {
        var that = e.sender
        setTimeout(function() {
          that.bringIntoView(that.shapes)
        }, 0)
      }
    }
  }
</script>
